<!--
  承租户合同
 -->

<template>
  <BaseMainSlot :show-tab="true">
    <template v-slot:btn-box>
      <ActionBar
        :page-no="131"
        :has-save="false"
        :has-del="false"
        :has-edit="false"
        :has-cancel="false"
        :has-add="true"
        :renewa-active="renewaActive"
        :recovery-active="recoveryActive"
        :suspension-active="suspensionActive"
        :termination-active="terminationActive"
        :has-termination="status === '执行中' ? true : false"
        :has-suspension="status === '执行中' ? true : false"
        :has-recovery="status === '已中止' ? true : false"
        :has-renewa="status === '已终止' ? false : false"
        @termination="termination"
        @add="add"
        @suspension="suspension"
        @recovery="recovery"
        @renewa="renewa"
      />
    </template>
    <template v-slot:tab-select>
      <Selectbutton @topitemtype="topitemtype" />
      <!-- <Selectbutton @topitemtype="topitemtype" /> -->
    </template>
    <template v-slot:search-box>
      <SearchForm :formConfig="formConfig" :formData="searchlist" @search="search"></SearchForm>
    </template>
    <template v-slot:table-box>
      <el-table
        ref="tableData"
        v-loading="loading"
        highlight-current-row
        :data="tableData"
        stripe
        border
        height="88%"
        :row-key="getRowKey"
        @row-click="handleEdit"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="index" width="55" label="序号" />
        <el-table-column prop="lessee.lesseeName" label="姓名" />
        <el-table-column prop="totalRentedArea" label="承租总面积">
          <template
            v-if="scope.row.lesseeNo"
            slot-scope="scope"
          >{{ scope.row.area }} 亩</template>
        </el-table-column>
        <el-table-column label="承租到期日期" prop="endTime" min-width="140" />
        <el-table-column
          prop="lessee.mainPlantVariety"
          label="主要种养品种"
          min-width="80"
        />
        <el-table-column prop="status" label="承租状态">
          <template slot-scope="scope">
            <div
              v-if="scope.row.status === '执行中' && scope.row.endTime"
              style="color: #409eff"
            >
              <span
                v-if="contactStatusDate(scope.row) === '即将到期'"
                style="color: yellow"
              >{{ contactStatusDate(scope.row) }}</span>
              <span
                v-if="contactStatusDate(scope.row) === '已到期'"
                style="color: red"
              >{{ contactStatusDate(scope.row) }}</span>
              <span
                v-if="contactStatusDate(scope.row) === '正常'"
                style="color: 409eff"
              >{{ contactStatusDate(scope.row) }}</span>
            </div>
            <div
              v-if="scope.row.status === '已中止'"
              style="color: yellow"
            >{{ contactStatusDate(scope.row) }}</div>
            <div
              v-if="scope.row.status === '已终止'"
              style="color: red"
            >{{ contactStatusDate(scope.row) }}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="" label="身份证">
          <template v-if="scope.row.lesseeNo" slot-scope="scope">
            <el-button
              type="success"
              plain
              size="mini"
              @click.stop="handleEdit(scope.row, 1, 2)"
            >查看</el-button>
          </template>
        </el-table-column>-->
        <el-table-column prop label="合同信息">
          <template v-if="scope.row.lesseeNo" slot-scope="scope">
            <el-button
              type="success"
              plain
              size="mini"
              @click.stop="handleEdit(scope.row, 1, 1)"
            >查看</el-button>
          </template>
        </el-table-column>
        <el-table-column width="200" label="操作">
          <template v-if="scope.row.contractNo" slot-scope="scope">
            <!-- <el-button
              v-if="judgePermission(131, 'edit')"
              class="text-btn-cursor"
              type="text"
              size="small"
              @click="edit"
            ><i class="el-icon-edit-outline"></i> 修改</el-button>-->
            <el-button
              v-if="judgePermission(131, 'delete')"
              class="text-btn-cursor cursor-delete"
              type="text"
              size="small"
              @click="handleDelete(scope.row.contractNo)"
            >
              <i class="el-icon-delete"></i> 删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :page-size="pageSize"
        :current-page="currentPage"
        :total-size="totalSize"
        @changePageSize="changePageSize"
        @changeCurrentPage="changeCurrentPage"
      />
    </template>
    <template v-slot:dialog>
      <!-- 展示图片 -->
      <el-dialog
        :title="titleText + '合同信息'"
        :visible.sync="dialogFormVisible"
        width="30%"
      >
        <el-form
          id="uploadForm"
          ref="formData"
          :model="formData"
          onsubmit="return false;"
          target="frameName"
          name="fileinfo"
          method="post"
          :rules="rules"
          enctype="multipart/form-data"
        >
          <el-form-item label="承租户：" prop="lesseeNo" class="w100p">
            <el-select v-model="formData.lesseeNo" filterable>
              <el-option
                v-for="(item, index) in LesseeArr"
                :key="index"
                :label="item.lesseeName"
                :value="item.lesseeNo"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="承租设施：" prop="facilityNoList" class="w100p">
            <el-select v-model="formData.facilityNoList" multiple filterable >
              <el-option
                v-for="(item, index) in facilityArr"
                :key="index"
                :label="item.facilityName"
                :value="item.facilityNo"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="承租总面积：" prop="area" class="w100p">
            <el-input v-model="formData.area" type="text" name="area" />
          </el-form-item>
          <el-form-item label="合同名称：" prop="contractName" class="w100p">
            <el-input
              v-model="formData.contractName"
              type="text"
              name="contractName"
            />
          </el-form-item>
          <el-form-item label="合同状态：" prop="status" class="w100p">
            <el-select v-model="formData.status" name="status" filterable>
              <el-option :label="'执行中'" :value="'执行中'" />
              <el-option :label="'已中止'" :value="'已中止'" />
              <el-option :label="'已终止'" :value="'已终止'" />
            </el-select>
          </el-form-item>
          <el-form-item label="合同日期：" :required="true" class="w100p dateTime">
            <el-form-item prop="startTime" class="w50p">
              <el-date-picker
                v-model="formData.startTime"
                type="date"
                value-format="timestamp"
                placeholder="合同开始日期"
              />
            </el-form-item>
            <i style="padding: 0 1.5%">-</i>
            <el-form-item prop="endTime" class="w50p">
              <el-date-picker
                v-model="formData.endTime"
                type="date"
                value-format="timestamp"
                placeholder="合同结束日期"
              />
            </el-form-item>
          </el-form-item>
          <el-form-item label="合同图片：" class="w100p">
            <div class="img_box">
              <div
                v-for="(item, index) of imgList"
                v-show="imgList.length != 0"
                :key="index"
                class="img_size"
              >
                <img
                  v-if="item.file.type.indexOf('image') !== -1"
                  :src="item.file.src"
                />
                <div class="remove_logo" @click="fileDel">×</div>
              </div>
              <div v-show="addState" class="add_img" @click="fileClick">
                <span>+</span>
              </div>
              <input
                id="inpu"
                ref="file"
                name="files"
                style="display: none"
                type="file"
                accept="image/*"
                @change="fileChange($event)"
              />
            </div>
            <iframe width="0" height="0" name="frameName"></iframe>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" @click="cancel('formData')">取 消</el-button>
          <el-button
            class="zh-button-two"
            type="primary"
            @click="save('formData')"
          >保 存</el-button>
        </div>
      </el-dialog>
      <!-- 展示图片 -->
      <el-dialog
        :title="'展示' + '合同信息'"
        :visible.sync="dialogFormSeeVisible"
        width="30%"
        class="See"
      >
        <div class="detection-query">
          <div ref="showPanel" class="medium">
            <h4
              v-if="nowlesses == 3 || nowlesses === 2"
              class="title"
            >承租户: {{ formeData.lesseeNo }}</h4>
            <el-card v-if="nowlesses === 1" class="box-card">
              <div slot="header" class="clearfix">
                <span>承租信息 Lessee information</span>
                <el-button
                  style="position: absolute; right: 30px; top: 5px"
                  type="text"
                >
                  <span
                    v-if="contactStatusDate(formeData) === '即将到期'"
                    style="color: yellow; font-size: 18px"
                  >{{ contactStatusDate(formeData) }}</span>
                  <span
                    v-if="contactStatusDate(formeData) === '已到期'"
                    style="color: red; font-size: 18px"
                  >{{ contactStatusDate(formeData) }}</span>
                </el-button>
              </div>
              <el-form
                ref="formData"
                label-position="left"
                :model="formeData"
                :rules="rules"
                class="el-form"
              >
                <el-form-item label="合同名称" prop="contractName" class="w100p">
                  <el-input
                    v-model="formeData.contractName"
                    :disabled="!canInput"
                  />
                </el-form-item>
                <el-form-item label="承租户姓名" prop="lesseeNo" class="w100p">
                  <el-input
                    v-model="formeData.lessee.lesseeName"
                    :disabled="!canInput"
                  />
                </el-form-item>
                <el-form-item label="联系方式" prop="method" class="w100p">
                  <el-input
                    v-model="formeData.lessee.person.phone"
                    :disabled="!canInput"
                  />
                </el-form-item>
                <el-form-item label="身份证号" prop="batchName" class="w100p">
                  <el-input
                    v-model="formeData.lessee.person.identificationNumber"
                    :disabled="!canInput"
                  />
                </el-form-item>
                <el-form-item label="承租数量" prop="batchNo" class="w100p">
                  <el-input
                    v-model="formeData.lessee.leasedPlotsCount"
                    :disabled="!canInput"
                  />
                </el-form-item>
                <el-form-item
                  label="承租总面积"
                  prop="procurementTime"
                  class="w100p"
                >
                  <el-input v-model="formeData.area" :disabled="!canInput" />
                </el-form-item>
                <el-form-item label="承租日期" prop="time" class="w100p dateTime">
                  <el-date-picker
                    v-model="formeData.startTime"
                    type="date"
                    format="yyyy 年 MM 月 dd 日"
                    class="w50p"
                    :disabled="!canInput"
                  />
                  <i style="padding: 0 1%">-</i>
                  <el-date-picker
                    v-model="formeData.endTime"
                    type="date"
                    class="w50p"
                    format="yyyy 年 MM 月 dd 日"
                    :disabled="!canInput"
                  />
                </el-form-item>
                <el-form-item label="主要种养品种" prop="loss" class="w100p">
                  <el-input
                    v-model="formeData.lessee.mainPlantVariety"
                    :disabled="!canInput"
                  />
                </el-form-item>
                <el-form-item label="承租设施" class="w100p facility">
                  <div
                    v-for="(facility, index) in formeData.facilityBOList"
                    :key="index"
                  >
                    {{ facility.facilityName }}
                    <span>
                      <span
                        v-if="index != formeData.facilityBOList.length - 1"
                      >、</span>
                    </span>
                  </div>
                </el-form-item>

                <el-form-item label="承租合同" class="w50p imax">
                  <div
                    v-for="(item, index) of imgList"
                    v-show="imgList.length != 0"
                    :key="index"
                    class="img_size"
                    @click="contractcO()"
                  >
                    <img
                      v-if="item.file.type.indexOf('image') !== -1"
                      :src="item.file.src"
                    />
                  </div>
                </el-form-item>
              </el-form>
              <div v-if="status === 3" class="expire">
                <p>--承租到期日期--</p>
                <p
                  v-show="formeData.endTime"
                >{{ dateToEFormat(formeData.endTime) }}</p>
              </div>
            </el-card>
          </div>
        </div>
      </el-dialog>
      <!-- <el-dialog title="身份证" :visible.sync="dialogIdCardVisible" width="60%">
        <img
          v-if="formeData.idCardList"
          :src="'data:image/png;base64,' + formeData.idCardList[0].nagativeSide"
        />
        <img
          v-if="formeData.idCardList"
          :src="'data:image/png;base64,' + formeData.idCardList[0].positive"
        />
      </el-dialog>-->
      <el-dialog
        title="承租合同"
        :visible.sync="dialogContractVisible"
        width="60%"
        :before-close="handleClose"
        class="Contract"
      >
        <div
          v-for="(item, index) of imgList"
          v-show="imgList.length != 0"
          :key="index"
          class="img_size"
        >
          <img
            v-if="item.file.type.indexOf('image') !== -1"
            :src="item.file.src"
          />
        </div>
        <pdf
          v-for="i in numPages"
          :key="i"
          ref="myPdfComponent"
          :src="src"
          :page="i"
        />
      </el-dialog>
    </template>
  </BaseMainSlot>
</template>

<script>
import SearchForm from '@/components/searchForm';
import ActionBar from "@/components/ActionBar/index.vue";
import Pagination from "@/components/Pagination/index.vue";
import Selectbutton from "../components/selectbutton/index.vue";
import Selectbut from "../components/selectbut.vue";
import BaseMainSlot from "@/components/BaseMainSlot/newBaseMainSlot.vue";
import axios from "axios";
import tenantContractManage from "@/api/digital-operation/tenant-manage/tenant-contract";
import tenantInfoManage from "@/api/digital-operation/tenant-manage/tenant-info";
import StartTimeEndTimeSelectionBox from "@/components/StartTimeEndTimeSelectionBox";
import { mymixin } from "@/utils/mixins";
import Clickoutside from "element-ui/src/utils/clickoutside";
import pdf from "vue-pdf";
import { mapGetters } from "vuex";
// 解决部分文字不显示的问题
// import CMapReaderFactory from "vue-pdf/src/CMapReaderFactory.js";

export default {
  name: "TenantContract",
  components: {
    SearchForm,
    Selectbutton,
    Selectbut,
    BaseMainSlot,
    ActionBar,
    Pagination,
    StartTimeEndTimeSelectionBox,
    pdf,
  },
  directives: { Clickoutside },
  mixins: [mymixin],
  data() {
    return {
      formConfig: [
        {
          label: '承租户姓名',
          prop: 'lesseeNo',
          type: 'select',
          options: [], // LesseeArr
          optionKey: { label: 'lesseeName', value: 'lesseeNo' },
        }, {
          label: '设施',
          prop: 'facilityNo',
          type: 'select',
          options: [], // facilityArr
          optionKey: { label: 'facilityName', value: 'facilityNo' },
        }, {
          label: '承租日期',
          prop: 'date',
          type: 'daterange',
        },
      ],
      searchlist: {},
      // 当前页
      currentPages: 1,
      // 每页的数据条数
      pageSizes: 1,
      // 总条数
      totalSize: 0,
      currentPage: 1,
      // 每页的数据条数
      pageSize: 10,
      // 总条数
      totalSizes: 0,
      addActive: true,
      // 承租户Id
      lesseeNo: undefined,
      endTime: "",
      pictureId: "",
      startTime: "",
      topitemtypeid: "",
      topitemtypeids: "",
      idCardInImgUrl: "",
      idCardOutImgUrl: "",
      status: "",
      img: [],
      table: [],
      //  承租户数组
      lessesArr: [],
      tableList: [],
      contractPictureList: [],
      // 修改按钮
      addState: true,
      renewaActive: false,
      recoveryActive: false,
      suspensionActive: false,
      terminationActive: false,
      // 弹出框
      dialogIdCardVisible: false,
      dialogContractVisible: false,
      dialogFormSeeVisible: false,
      formeData: {
        endTime: "",
        startTime: "",
        lessee: {
          lesseeName: "",
          leasedPlotsCount: 0,
          mainPlantVariety: "",
          person: {
            phone: "",
            identificationNumber: ""
          }
        },
        facilityBOList: []
      },
      formData: {
        status: "执行中",
        facilityNoList: ['']
      },
      nowlesses: 1,
      LessesFacilityList: [],
      facilityGroupId: "",
      facilityNo: undefined,
      facilityGroupList: [],
      facilityArr: [],
      LesseeArr: [],
      startTimes: "",
      endTimes: "",
      src: "",
      numPages: 0,
      rules: {
        lesseeNo: [
          { required: true, message: "请选择承租户名称", trigger: "change" }
        ],
        facilityNoList: [
          { required: true, message: "请选择设施", trigger: "blur" }
        ],
        contractName: [
          { required: true, message: "请输入合同名称", trigger: "blur" }
        ],
        status: [
          { required: true, message: "请选择合同状态", trigger: "change" }
        ],
        startTime: [
          { required: true, message: "请选择合同开始日期", trigger: "change" }
        ],
        endTime: [
          { required: true, message: "请选择合同结束日期", trigger: "change" }
        ]
      }
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission"
    })
  },
  watch: {
    imgList() {
      if (this.imgList.length === 3) {
        this.addState = false;
      } else {
        this.addState = true;
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    // 获取点击的分页index
    topitemtype(e) {
      this.topitemtypeid = e;
      // 获取表格数据
      // console.log(e)
      if (this.topitemtypeid === 1) {
        this.status = "执行中";
      } else if (this.topitemtypeid === 3) {
        // this.currentPages = 1
        // this.status = 3
        this.topitemtypes();
      }
      this.tableData = [];
      this.getTableDataList();
      this.queryLessesByCondition();
      // this.getFormeDataList();
    },
    topitemtypes(e) {
      this.topitemtypeids = e;
      // 获取表格数据
      // console.log(e)
      if (this.topitemtypeid === 3) {
        setTimeout(() => {
          if (this.topitemtypeids === 2) {
            this.status = "已中止";
          } else if (this.topitemtypeids === 3) {
            this.status = "已终止";
          }
          this.getTableDataList();
          this.queryLessesByCondition();
        }, 400);
      }
    },
    renewa() {},
    // 查询表格数据
    getTableDataList() {
      this.loading = true;
      let params = {
        page: this.currentPage,
        size: this.pageSize,
        entity: {
          // organizationNo: sessionStorage.organizationNo,
          lesseeNo: this.searchlist.lesseeNo || undefined,
          // lesseeNo: params.lesseeNo,
          startTime: this.searchlist.date && this.dateToFormattwo(this.searchlist.date[0]),
          endTime: this.searchlist.date && this.dateToFormattwo(this.searchlist.date[1]),
          // startTime: this.startTime || undefined,
          // endTime: this.endTime || undefined,
          status: this.status || undefined,
          facilityNo: this.searchlist.facilityNo || undefined
        }
      };
      tenantContractManage.getTenantInfoList(params).then(res => {
        // console.log(res);
        this.loading = false;
        let data = res.data;
        if (data) {
          this.totalSize = data.totalElements;
          this.tableData = data.content;
          this.addblankmet();
          this.resetActionBar();
          // this.handleEdit(this.tableData[0], 1, 1);
        }
      });
    },
    fileClick() {
      document.getElementById("inpu").click();
    },
    fileChange(el) {
      // console.log(el)
      // const list = this.$refs.file.files;
      if (!el.target.files[0].size) return;
      this.fileList(el.target);
      el.target.value = "";
    },
    fileList(fileList) {
      // console.log(fileList)
      let files = fileList.files;
      for (let i = 0; i < files.length; i++) {
        // 判断是否为文件夹
        if (files[i].type !== "") {
          this.fileAdd(files[i]);
        } else {
          // 文件夹处理
          this.folders(fileList.items[i]);
        }
      }
    },
    // 文件夹处理
    folders(files) {
      let _this = this;
      // 判断是否为原生file
      if (files.kind) {
        files = files.webkitGetAsEntry();
      }
      console.log(files);
      files.createReader().readEntries(function(file) {
        for (let i = 0; i < file.length; i++) {
          if (file[i].isFile) {
            _this.foldersAdd(file[i]);
          } else {
            _this.folders(file[i]);
          }
        }
      });
    },
    foldersAdd(entry) {
      let _this = this;
      entry.file(function(file) {
        _this.fileAdd(file);
      });
    },
    fileAdd(file) {
      // 总大小
      this.size = this.size + file.size;
      let reader = new FileReader();
      reader.vue = this;
      reader.readAsDataURL(file);
      reader.onload = function() {
        file.src = this.result;
        this.vue.imgList.push({
          file
        });
      };
    },
    fileDel(index) {
      this.imgList.splice(index, 1);
    },
    bytesToSize(bytes) {
      if (bytes === 0) return "0 B";
      let k = 1000; // or 1024
      let sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
      let i = Math.floor(Math.log(bytes) / Math.log(k));
      return (bytes / Math.pow(k, i)).toPrecision(3) + " " + sizes[i];
    },
    // 承租合同 设施，设施组搜索
    async queryLessesByCondition() {
      const { data: res } = await tenantContractManage.getfacilityList();
      this.facilityArr = res;
      this.setOptions(this.formConfig, 'facilityNo', res)
      const { data: Lesses } = await tenantInfoManage.queryLessesByCondition();
      this.LesseeArr = Lesses;
      this.setOptions(this.formConfig, 'lesseeNo', Lesses)
    },
    getRowKey(row) {
      return row.contractId;
    },
    // 时间转换
    dateFormat(row, colnum) {
      if (row.endTime) {
        return this.$moment(row[colnum.property]).format(
          "YYYY年MM月DD日 HH:mm:ss"
        );
      }
    },
    // 状态
    contactStatusDate(row) {
      let date = new Date();
      let dates = new Date(row.endTime);
      // console.log(date)
      // console.log(row.endTime)
      if (row) {
        if (
          row.status === "执行中" &&
          date < dates &&
          date > dates - 2 * 30 * 24 * 60 * 60 * 1000
        ) {
          return "即将到期";
        } else if (row.status === "执行中" && date > dates) {
          return "已到期";
        } else if (row.status === "执行中" && date < dates) {
          return "正常";
        } else if (row.status === "已中止") {
          return "已中止";
        } else if (row.status === "已终止") {
          return "已到期";
        }
      }
    },
    queryfacility(row) {
      let list = [];
      tenantContractManage.querylessesById(row).then(res => {
        let data = res.data;
        // console.log(data)
        if (data.lessesFacilityMapperList) {
          data.lessesFacilityMapperList.forEach(item => {
            list.push(item.facilityGroupName);
          });
        }
      });
    },
    idCardcO(row) {
      // console.log(row)
      if (!row) {
        this.$message.warning("暂无图片");
        return;
      }
      this.idCardInImgUrl = row[0]["positive"];
      this.idCardOutImgUrl = row[0]["nagativeSide"];
      if (this.idCardInImgUrl || this.idCardOutImgUrl) {
        this.dialogIdCardVisible = true;
      } else {
        this.$message.warning("暂无图片");
      }
    },
    contractcO(row) {
      // if (!row) {
      //   this.$message.warning("暂无图片");
      //   return;
      // }
      // this.contractPictureList = row;
      // if (this.contractPictureList) {
      this.dialogContractVisible = true;
      // } else {
      //   this.$message.warning("暂无图片");
      // }
    },
    // 搜索框时间
    startVal(e) {
      this.startTime = e;
    },
    endVal(e) {
      this.endTime = e;
    },
    // 搜索框时间
    startVals(e) {
      this.startTimes = e;
    },
    endVals(e) {
      this.endTimes = e;
    },
    open(text) {
      this.$confirm(`此操作将${text}合同, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          if (text === "已中止") {
            this.saveSt("已中止");
            this.suspensionActive = false;
          } else if (text === "已终止") {
            this.saveSt("已终止");
            this.terminationActive = false;
          } else if (text === "恢复") {
            this.saveSt("执行中");
            this.terminationActive = false;
          }
          // this.$message({
          //   type: 'success',
          //   message: '操作成功!'
          // });
        })
        .catch(() => {
          if (text === "已中止") {
            this.suspensionActive = false;
          } else if (text === "已终止") {
            this.terminationActive = false;
          }
          this.$message({
            type: "info",
            message: "已取消操作"
          });
        });
    },
    suspension() {
      this.open("已中止");
    },
    termination() {
      this.open("已终止");
    },
    recovery() {
      this.open("恢复");
    },
    // // 分页方法
    search() {
      this.currentPage = 1;
      if (this.lesseeNo === "") {
        this.$route.query.id = "";
      }
      // console.log(this.startTime, this.endTime)
      this.getTableDataList();
    },
    changePageSize(pageSizes) {
      this.pageSize = pageSizes;
      this.getTableDataList();
    },
    changeCurrentPage(currentPages) {
      this.currentPage = currentPages;
      this.getTableDataList();
    },
    handleEdit(row, e, nowlesses) {
      if (!row.lesseeNo) {
        this.formeData = {
          endTime: "",
          startTime: "",
          lessee: {
            lesseeName: "",
            leasedPlotsCount: 0,
            mainPlantVariety: "",
            person: {
              phone: "",
              identificationNumber: ""
            }
          },
          facilityBOList: []
        };
        this.formData = {

          status: "执行中",
          facilityNoList: []
        };

        this.nowlesses = parseInt(nowlesses) || 1;
        return;
      }
      // this.formeData = {};
      // this.formData = JSON.parse(JSON.stringify(row));
      this.nowlesses = parseInt(nowlesses) || 1;
      // this.lesseeNo = row.lesseeNo;
      // console.log(this.nowlesses)
      tenantContractManage.getTenantList(row.contractNo).then(res => {
        let data = res.data;
        this.formeData = data;
        this.formData = data;
        let facilityNoList = data.facilityBOList.map(item => item.facilityNo);
        this.$set(this.formData, "facilityNoList", facilityNoList);
        this.$set(this.formData, "endTime", new Date(data.endTime));
        this.$set(this.formData, "startTime", new Date(data.startTime));
        this.$set(this.formeData, "facilityNoList", facilityNoList);
        this.$set(this.formeData, "endTime", new Date(data.endTime));
        this.$set(this.formeData, "startTime", new Date(data.startTime));
        // this.contractPictureList = this.formeData.contractPictureList;
        // console.log(this.formeData);

        this.imgList = [];
        data.contractPictureIdList.forEach(async item => {
          if (item) {
            const { data: res } = await tenantContractManage.getQueryImgList(
              item
            );
            let add = this.base64ImgtoFile(
              "data:image/png;base64," + res.pictureData,
              res.contractPictureName
            );
            this.fileAdd(add);
          }
        });
      });
      if (e === 1) {
        this.dialogFormSeeVisible = true;
      }
      if (e !== 1) {
        this.renewaActive = true;
        this.recoveryActive = true;
        this.suspensionActive = true;
        this.terminationActive = true;
      }
    },
    base64ImgtoFile(dataurl, filename = "file") {
      let arr = dataurl.split(",");
      // console.log(arr)
      let mime = arr[0].match(/:(.*?);/)[1];
      let suffix = mime.split("/")[1];
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], `${filename}.${suffix}`, {
        type: mime
      });
    },
    handleSelectionChange(list) {
      this.lesseeNoList = [];
      this.lesseeNoList = list.map(item => item.lesseeNo);
      if (this.lesseeNoList.length > 1) {
        this.$message.warning("承租户不可多选删除！");
        this.lesseeNoList.splice(0, this.lesseeNoList.length - 1);
        // console.log(this.lesseeNoList);
      }
      if (this.lesseeNoList.length > 0) this.delActive = true;
      else this.delActive = false;
      // 多个处理为单个数据
    },
    resetActionBar() {
      this.renewaActive = false;
      this.suspensionActive = false;
      this.terminationActive = false;
      this.recoveryActive = false;
    },
    handleDelete(val) {
      // tenantContractManage.delTenant(val).then((res) => {
      //   if (res.code === 1) {
      //     this.$message.success(res.msg);
      //     this.getTableDataList();
      //   } else {
      //     this.$message.warning(res.msg || "删除失败");
      //   }
      // });
      // this.selectedStaffList.splice(0, this.selectedStaffList.length - 1);
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "myClass"
      })
        .then(() => {
          tenantContractManage.delTenant(val).then(res => {
            if (res.code === 1) {
              this.$message.success(res.msg);
              this.getTableDataList();
            } else {
              this.$message.warning(res.msg || "删除失败");
            }
          });
        })
        .catch(() => {
          this.$message("取消删除");
        });
    },
    saveSt(e) {
      // this.formeData.status = e;
      tenantContractManage
        .editTenant({ contractNo: this.formData.contractNo, status: e })
        .then(res => {
          if (res.code === 1) {
            this.$message.success(res.msg || "修改成功！");
            this.getTableDataList();
            this.resetActionBar();
          } else {
            this.$message.error(res.msg || "修改失败!");
          }
        });
    },
    save(formData) {
      this.$refs[formData].validate(valid => {
        if (valid) {
          if (this.nowChanceStau === "edit") {
            let form = document.forms.namedItem("fileinfo");
            // console.log(form)
            let formDatas = new FormData(form);
            let organizationNo = sessionStorage.organizationNo;
            formDatas.append("organizationNo", organizationNo);
            formDatas.append("facilityNoList", [
              ...this.formData.facilityNoList
            ]);
            formDatas.append("lesseeNo", this.formData.lesseeNo);
            formDatas.append("startTimeInput", this.formData.startTime);
            formDatas.append("endTimeInput", this.formData.endTime);
            for (let i = 0; i < this.imgList.length; i++) {
              // console.log(this.imgList[i].file, i);
              formDatas.append("files", this.imgList[i].file);
            }
            // return
            axios({
              url: this.$baseurl.webServiceUrl + "v3/lessee/contract/edit",
              // url: 'http://192.168.1.85:40029' + "/disease/add",
              // url: "http://192.168.1.85:8080/fileArg/receive",
              method: "post",
              headers: {
                databaseName: sessionStorage.databaseName,
                organizationList: sessionStorage.organizationList,
                organizationNo: sessionStorage.organizationNo,
                virtualSystemNo: sessionStorage.virtualSystemNo,
                accessToken: sessionStorage.token,
                enctype: "multipart/form-data"
              },
              data: formDatas
              // params: this.formData
            }).then(res => {
              if (res.data.code === 1) {
                this.getTableDataList();
                this.dialogFormVisible = false;
                this.$message.success("添加成功！");
              } else {
                this.$message.warning("添加失败！");
              }
            });
          } else if (this.nowChanceStau === "add") {
            let form = document.forms.namedItem("fileinfo");
            // console.log(form)
            let formDatas = new FormData(form);
            let organizationNo = sessionStorage.organizationNo;
            formDatas.append("organizationNo", organizationNo);
            formDatas.append("facilityNoList", [
              ...this.formData.facilityNoList
            ]);
            formDatas.append("lesseeNo", this.formData.lesseeNo);
            formDatas.append("startTimeInput", this.formData.startTime);
            formDatas.append("endTimeInput", this.formData.endTime);
            for (let i = 0; i < this.imgList.length; i++) {
              // console.log(this.imgList[i].file, i);
              formDatas.append("files", this.imgList[i].file);
            }
            // return
            axios({
              url: this.$baseurl.webServiceUrl + "v3/lessee/contract/add",
              // url: 'http://192.168.1.85:40029' + "/disease/add",
              // url: "http://192.168.1.85:8080/fileArg/receive",
              method: "post",
              headers: {
                databaseName: sessionStorage.databaseName,
                organizationList: sessionStorage.organizationList,
                organizationNo: sessionStorage.organizationNo,
                virtualSystemNo: sessionStorage.virtualSystemNo,
                accessToken: sessionStorage.token,
                enctype: "multipart/form-data"
              },
              data: formDatas
              // params: this.formData
            }).then(res => {
              if (res.data.code === 1) {
                this.getTableDataList();
                this.dialogFormVisible = false;
                this.$message.success("添加成功！");
              } else {
                this.$message.warning("添加失败！");
              }
            });
          }
        } else {
          // console.log('error submit!!');
          return false;
        }
      });
    },
    handleClose(done) {
      done();
      // this.$confirm("确认关闭？")
      //   .then(_ => {
      //   })
      //   .catch(_ => {});
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";
::v-deep .common-layout {
  border: 1px dashed rgba(14, 196, 151, 1) !important;
  overflow: hidden;
  .search-box {
    .el-row {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .label-input {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .label {
          min-width: 100px;
        }
      }
    }
  }
  .content {
    height: calc(100% - 120px) !important;
    .table-box {
      width: 92% !important;
      height: 100% !important;
      .el-table {
        height: 90% !important;
      }
      .pagination {
        bottom: 0 !important;
      }
    }
    .form {
      border-radius: 20px;
      // border: 0px dashed #406c7a !important;
      padding: 0 !important;
    }
  }
}
::v-deep .w50p {
  width: 48%;
}
.detection-query {
  height: 100%;
  width: 100%;
  padding-left: 0%;
  position: relative;
  .medium {
    width: 100%;
    height: 100%;
    margin: 0 auto !important;
    overflow-y: auto;
    border: 1px solid $borderColor;
    // padding: 5px;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.2s;
    &:hover {
      border-color: #499db7;
    }
    h4.title {
      margin: 10px 0;
      font-size: 18px;
    }
    .img {
      box-sizing: border-box;
    }
    img {
      width: 100%;
      padding-bottom: 10px;
      // border-bottom: 3px dashed #15a0ca;
      margin-bottom: 10px !important;
    }
    ::v-deep .el-card {
      border: 1px solid #000;
      height: calc(100%);
      .el-card__header {
        background-color: #005d7c;
        .clearfix {
          font-size: 16px;
          color: #fff;
        }
      }
      .el-card__body {
        padding: 10px 0 0 0;
        height: 90%;
        overflow-y: auto;
        position: relative;
        .el-form {
          display: flex;
          flex-wrap: wrap;
          .el-form-item {
            display: flex;
            margin-bottom: 0px;
            height: 36px;
            margin-bottom: 14px;
            .el-form-item__label {
              min-width: 100px;
              font-size: 14px;
              color: #7a99a3;
              text-align: end;
            }
            .el-form-item__content {
              width: 76%;
              // padding-left: 10px;
              border-bottom: 1px solid #7a99a3;
              .el-input__inner {
                border: none;
                color: #000;
                font-size: 14px;
                height: 25px;
                line-height: 25px;
                // border-bottom: 1px solid #7a99a3;
              }
            }
          }
          .imax {
            .el-form-item__content {
              border: none !important;
            }
            // font-size: 30px;
          }
          .facility {
            .el-form-item__content {
              padding-left: 10px;
              border-bottom: 0px solid #7a99a3;
              flex-wrap: wrap;
              height: 140px;
              overflow-y: auto;
              align-content: flex-start;
              justify-content: flex-start;
              div {
                span {
                  padding-right: 5px;
                }
              }
            }
          }
          .dateTime {
            .el-input__prefix {
              display: none;
              right: 0;
            }
            .el-input__suffix {
              display: none;
              right: 0;
              top: 0;
              bottom: 0;
              left: 0;
            }
            .el-form-item__content {
              border-bottom: 1px solid #7a99a3;
              font-size: 12px;
              display: flex;
              .imax {
                font-size: 20px;
              }
              .el-date-editor.el-input {
                min-width: 100px !important;
                // margin-right: 5px;
              }
              .el-input__inner {
                font-size: 12px;
                padding-left: 16px;
                padding-right: 0;
                border-bottom: none;
              }
            }
          }
        }
        .expire {
          position: absolute;
          bottom: 70px;
          transform: rotate(-24deg);
          text-align: center;
          width: 45%;
          height: 83px;
          right: 30px;
          border: 3px solid rgba(212, 48, 48, 1);
          background-color: rgba(212, 48, 48, 0.13);
          p:first-child {
            color: rgba(212, 48, 48, 1);
            font-size: 16px;
            margin: 10px;
          }
          p:last-child {
            font-size: 18px;
            color: rgba(212, 48, 48, 1);
            margin: 15;
          }
        }
        // }
      }
      // }
    }
  }
}
::v-deep .See {
  .el-dialog {
    position: relative;
    height: 100%;
    .el-dialog__body {
      padding: 10px 10px;
      display: flex;
      height: 93%;
      overflow-y: auto;
      min-width: 35%;
      align-items: center;
      flex-direction: column;
      max-height: 100%;
      img {
        width: 33%;
        padding-bottom: 10px;
        // border-bottom: 6px dashed #005d7c;
        margin-bottom: 10px !important;
      }
    }
    .el-dialog__footer {
      position: absolute;
      bottom: 10px;
      right: 10px;
    }
  }
}
.Contract {
  ::v-deep .el-dialog__body {
    padding: 40px;
    display: flex;
    height: 86%;
    flex-direction: column;
    img {
      width: 100%;
    }
    span {
      width: 100%;
    }
  }
}
.label {
  text-align: end !important;
}
// ::v-deep .action-bar {
//   width: 20%;
//   height: 50px;
//   display: flex;
//   align-items: center;
//   justify-content: flex-end;
//   margin-bottom: 10px;
//   position: absolute;
//   right: 0;
//   top: 0;
//   background-color: rgba(0, 72, 90, 0);
// }
.title-ds {
  width: 100%;
  height: calc(100% - 45px);
  display: flex;
  justify-content: center;
  align-items: center;
  div {
    font-size: 18px;
  }
}
::v-deep .el-form-item__content {
  .is-disabled {
    .el-input__inner {
      color: #000 !important;
    }
  }
}
.img_box {
  display: flex;
  width: 100%;

  .img_size {
    position: relative;
    img {
      max-height: 220px;
    }
    .remove_logo {
      position: absolute;
      top: 0;
      right: 0;
      height: auto;
      line-height: initial;
      font-size: 21px;
    }
  }
}

.add_img {
  margin-left: 10px;
  span {
    font-size: 34px;
    display: inline-block;
    border: 1px solid #0b8e8b;
    box-sizing: border-box;
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 32px;
    border-radius: 4px;
    font-family: "微軟正黑體 Light", "楷体", "宋体";
  }
}
</style>
